
#{if _contacto!=null}
	<h2 id="crudShowTitle">Agregar Empresas 
	<img id="addEmpresa" src="/public/images/Add.png" alt="Add">
	</h2>
	<div class="asociadas">
		<table>		
			<thead>
				<tr>
					<th>Empresa</th>
					<th>Cargo</th>
					<th>Area</th>
					<th>Email</th>
					<th>Telefono</th>
					<th></th>
				</tr>
			</thead>
			#{list items:_empresasAsociadas, as:'asociada'}				
				<tr>
					<td>${asociada.empresa.razonSocial}</td>
					<td><input id="cargo_${asociada.id}" type="text" value=${asociada.cargo}></td>
					<td><input id="area_${asociada.id}" type="text" value=${asociada.area}></td>
					<td><input id="email_${asociada.id}" type="text" value=${asociada.email}></td>
					<td><input id="telefono_${asociada.id}" type="text" value=${asociada.telefono}></td>
					<td>
						<a href="#" onclick="updateContactoEmpresa(${asociada.id});" class="asociada" ><img height="16px" width="16px" id="updateEmpresa" src="/public/images/save.png" alt="save"></a>
						<a href="@{Contactos.removeContactoEmpresa(_contacto, asociada.empresa.id)}" class="asociada" ><img height="16px" width="16px" id="removeEmpresa" src="/public/images/delete.gif" alt="remove"></a>
						<a href="@{Contactos.historiaCargos(_contacto, asociada.empresa.id)}" class="asociada" ><img height="16px" width="16px" id="historialEmpresa" src="/public/images/info.png" alt="info"></a>
					</td>
				</tr>
			#{/list}
		</table>	
	</div>
	
	<div id="dialog-empresas"  style="display: none" class="dialog-style">
		<h2 id="crudShowTitle">Buscar Empresas
			<input type="text" id="nameSearch" name="nameSearch">
		</h2>
		<div class="objectForm">
			<div class="crudField crud_text" id="aasociar">
				<table id="toAsociar">			
					#{list items:_empresas, as:'empresa'}				
						<tr><td><a href="@{Contactos.asociarEmpresa(_contacto, empresa.id)}" class="empresa" >${empresa.razonSocial}</a></td></tr>
					#{/list}
				</table>
			</div>
		</div>	
	</div>


<script type="text/javascript">
$().ready(function() {
	
	$( "#dialog-empresas").dialog({
		autoOpen: false,
	    width: 550, 
	    maxWidth: 550,
	    minWidth: 430,
		height: 'auto',
		fluid: true, 
	    resizable: false,
	    dialogClass: "dialog-style",
	    open: function(event, ui){
	    },
	    close: function(event, ui){
	    	$( "#dialog-empresas" ).dialog( "close" );
	    }
	});
	$("#nameSearch").keyup(function() {
		  searchEmpresas();
	});
	$( "#addEmpresa" ).click(function() {
		$( "#dialog-empresas" ).dialog( "open" );
		return false;
	});
	
	
})

function searchEmpresas(){
	$.get("/Contactos/searchEmpresas",  {
		id: ${_contacto},
		nombre: $("#nameSearch").val()
	},function(data, id){
		if(data[0] != 'ERROR'){
			$("#toAsociar").remove();
			var empresas = JSON.parse(data[1]);
			var i = 0;
			html = "<table id='toAsociar'>";
			for(i = 0; i < empresas.length; i++) {
				html = html + 
				"<tr><td><a href='/Contactos/asociarEmpresa?id=${_contacto}&empresa="+empresas[i].id+"' class='empresa' >"+empresas[i].razonSocial+"</a></td></tr>";
			}
			html = html + "</table>";
			$("#aasociar").append(html);
			return false;
		}else {
			return false;
		}
		
	},'json');
}
function updateContactoEmpresa(contactoEmpresaId){
	cargo = $('#cargo_'+contactoEmpresaId).val();
	area = $('#area_'+contactoEmpresaId).val();
	telefono = $('#telefono_'+contactoEmpresaId).val();
	email = $('#email_'+contactoEmpresaId).val();
	$.get("/Contactos/updateContactoEmpresa",  {
		id: ${_contacto},
		contactoEmpresa: contactoEmpresaId,
		cargo: cargo, area: area, telefono: telefono, email:email
	},function(data){
		if(data[0] != 'ERROR'){
			return false;
		}else {
			return false;
		}
		
	},'json');
}

</script>
#{/if}